<template>
	<view class="">
		<view class="title-con">
			<view class="jiantou" @click="fanhui">
				<img src="./生活图片/cxy1_16.png">
			</view>
			<view class="title">
				订单信息
			</view>
			<view class="title-right">

			</view>
		</view>
		<view class="sd-time">
			送达时间
		</view>
		<view class="sd-list">
			<!-- <view class="sd-list-one" >
				<p>{{lists.name1}}</p>
			</view> -->
			<view @click="Click(item.name)" v-for="(item) in lists" :key="item.id"
				:class=" iactive == item.name?' sd-list-one-one ':' sd-list-one'">
				{{item.name}}
			</view>

		</view>
		<view class="sd-time">
			收货地址
		</view>
		<view class="sh-dizhi">
			<input type="text" placeholder="请设置收货地址" />
		</view>
		<view class="sd-time">
			支付方式
		</view>
		<view class="sd-list-list">
			<view class="sd_list_content">

				<view class="sd-list-img">
					<img src="./生活图片/cxy_22.png">
				</view>
				<view class="sd-list-img-img">

				</view>
			</view>

			<view class="radio-con">
				<form method="" name="formName">
					<u-radio-group v-model="value" @change="radioChange" class="radio-a">
						<u-radio name="wx" class="wx_radio">

						</u-radio>
						<u-radio name="zfb" class="zfb_radio">

						</u-radio>
					</u-radio-group>
				</form>
			</view>
			<view class="con">
				<view class="goumai">
					<view class="goumai-right">
						<view class="goumai-right-p">
							￥{{listprice.price}}
						</view>
						<view class="tijiao-p">
							(消耗10积分)
						</view>
					</view>
					<view class="goumai-left">
						<view class="goumai-p" @click="tijiao" v-show="xianshi">
							提交
						</view>
						<view class="goumai-p-p" v-show="vshow">
							<p>提交</p>
						</view>
					</view>
					
				</view>
			</view>

		</view>
		<!-- <view class="mask">
		  	   <view class="queren">
		  	   	     确认支付
		  	   </view>
			   <view class="queren">
			   	
			   </view>
		  </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xianshi: true,
				value: "wx",
				qian: undefined,
				id: 1,
				lists: [{
						id: 1,
						name: '11:00'
					},
					{
						id: 2,
						name: '12:00'
					},
					{
						id: 3,
						name: '13:00'
					}, {
						id: 4,
						name: '14:00'
					}, {
						id: 5,
						name: '15:00'
					}, {
						id: 6,
						name: '16:00'
					}
				],
				iactive: '11:00',
				listprice: [{
					price: ''
				}],
				vshow: false,
				quantity:'',
			}
		},
		onLoad(options) {
			this.listprice.price = options.price
			this.quantity=options.quantity
		},
		onShow() {
			this.cxydetails()
		},
		methods: {
			cxydetails() {
				this.$api.getcxydetails().then((res) => {
					this.list = res.data[0]
					// console.log(this.list)
				})
			},
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			Click(name) {	
				this.iactive = name
			},
			fanhui() {
				uni.navigateTo({
					url: '/pages/Home/cxydetails'
				})
			},
			tijiao() {
				if(this.list.kjf >= 9){
					 uni.showToast({
					 	icon: "success",
					 	title: '已提交！',
					 })
				}
				 setTimeout(()=>{
					  this.qian =this.list.kjf - this.quantity*this.list.xjf
					  this.$api.cxyupMsg({
					  	id: this.id,
					  	kjf: this.qian,
						
					  }).then(res => {
					  	this.cxydetails()
					  })
				 },2000)
			}
		}
	}
</script>

<style>
	
	
	.mask {
		width: 100%;
		height: 100%;
		background: rgba(175, 175, 175, 0.5);
		position: fixed;
		top: 0;
		z-index: 11111;
	}

	.queren {
		width: 500upx;
		height: 200upx;
		background-color: #fff;
		position: absolute;
		top: 30%;
		left: 17%;
		text-align: center;
		font-size: 36upx;
		line-height: 104upx;
	}

	.con {
		width: 100%;
		height: 159px;
		background-color: #f2f2f2;
		position: absolute;
	}

	.title-con {
		width: 100%;
		height: 112upx;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f7cb88;
	}

	.title {
		width: 33%;
		height: 100%;
		/* background-color: antiquewhite; */
		/* margin-left: 30upx; */
		line-height: 61px;
		text-align: center;
		font-size: 38upx;
		margin-left: -30upx;
		/* margin-top: 20upx; */
	}

	.jiantou {
		width: 33%;
		height: 90%;
		/* background-color: aquamarine; */
	}

	.jiantou img {
		width: 9%;
		height: 41%;
		margin-top: 24upx;
		margin-left: 20upx;
	}

	.title-right {
		width: 29%;
		height: 90%;
		/* background-color: blue; */
		/* 	  	display: flex;
	  	justify-content: space-around;
	  flex-wrap: wrap; */
	}

	.wx {
		width: 40upx;
		height: 38upx;
		/* background-color: aqua; */
		margin-top: 16upx;
		margin-left: 20upx;

	}

	.wx img {
		width: 100%;
		height: 100%;
	}

	.sd-time {
		width: 100%;
		height: 82upx;
		background-color: #f2f2f2;
		line-height: 76upx;
		text-indent: 20upx;
		color: #5b5b5b;
		font-size: 35upx;
	}

	.sd-list {
		width: 100%;
		height: 392upx;
		/* background-color: aquamarine; */
		display: flex;
		/* justify-content: space-around; */
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.sd-list-list {
		width: 100%;
		height: 264upx;
		/* background-color: aquamarine; */
		float: left;
	}

	.sd-list-one {
		width: 211upx;
		height: 149upx;
		/* background-color: red; */
		border-radius: 10upx;
		border: 1px solid #999999;
		margin-top: 20upx;
		text-align: center;
		line-height: 66px;
		font-size: 40upx;
		color: #999999;
	}

	.sd-list-one-one {
		width: 211upx;
		height: 149upx;
		/* background-color: red; */
		border-radius: 10upx;
		border: 1px solid #faab34;
		margin-top: 20upx;
		text-align: center;
		line-height: 66px;
		font-size: 40upx;
		color: #faab34;
	}

	.sd_list_content {
		width: 400upx;
		height: 180upx;
		margin: 0 auto;
	}

	.sd-list-img {
		width: 137upx;
		height: 138upx;
		/* background-color: red; */
		border-radius: 10upx;
		/* border: 1px solid #999999; */
		margin-top: 20upx;
		float: left;
	}

	.sd-list-img-img {
		width: 137upx;
		height: 138upx;
		background-color: #51c332;
		border-radius: 22upx;
		/* border: 1px solid #999999; */
		margin-top: 20upx;
		background-image: url('@/pages/Home/生活图片/cxy_23.png');
		background-size: 91%;
		background-repeat: no-repeat;
		background-position: center;
		float: right;

	}

	.sd-list-img img {
		width: 100%;
		height: 100%;
	}

	/* 
	.sd-list-one p {
		text-align: center;
		line-height: 66px;
		font-size: 40upx;
		color: #999999;
	}
 */
	.sh-dizhi {
		width: 100%;
		height: 115upx;
		background-color: #fff;
	}

	.sh-dizhi input {
		width: 100%;
		height: 100%;
		line-height: 50upx;
	}

	.radio-con {
		width: 100%;
		height: 86upx;
		/* background-color: #f2f2f2; */
	}

	.radio-a {
		width: 360upx;
		height: 86upx;
		margin: 0 auto;
		display: block;
		/* background-color: #f2f2f2; */
	}

	.wx_radio {
		width: 60upx;
		height: 80upx;
		float: left;
		margin-left: 20upx;
	}

	.zfb_radio {
		width: 60upx;
		height: 80upx;
		float: right;
	}

	.con {
		width: 100%;
		height: 139upx;
		background-color: #f2f2f2;
		position: absolute;
	}

	.goumai {
		width: 100%;
		height: 128upx;
		background-color: #f7f7f7;
		/* background-color: red; */

		position: relative;
		top: 60%;
		display: flex;
	}

	.goumai-right {
		width: 50%;
		height: 100%;
		/* background-color: blue; */
		display: flex;
	}

	.goumai-left {
		width: 50%;
		height: 100%;
		/* background-color: teal; */
		display: flex;

	}

	.jian {
		width: 65upx;
		height: 65upx;
		border: 1px solid #faab34;
		/* background-color: #faab34; */
		border-radius: 50%;
		text-align: center;
		/* font-size: 60upx; */
		color: #fff;
		margin-top: 28upx;
		margin-left: 20upx;
	}

	.jian img {
		width: 55%;
		/* height:55%; */
		margin: 26upx auto;
	}

	.goumai-right-p {
		line-height: 57px;
		font-size: 40upx;
		color: #faab34;
		margin-left: 30upx;
	}

	.jia {
		width: 65upx;
		height: 65upx;
		/* border: 1px solid #faab34; */
		background-color: #faab34;
		border-radius: 50%;
		text-align: center;
		/* font-size: 60upx; */
		color: #fff;
		margin-top: 28upx;
		margin-left: 30upx;
	}

	.jia img {
		width: 55%;
		height: 55%;
		margin: 10upx auto;
	}

	.goumai-qian {
		line-height: 116upx;
		font-size: 40upx;
		color: #faab34;
	}

	.goumai-qian-q {
		line-height: 124upx;
		/* font-size: 40upx; */
		color: #faab34;
		margin-left: 10upx;
	}

	.goumai-p {
		width: 179upx;
		height: 100%;
		background-color: #faab34;
		margin-left: 97px;
		text-align: center;
		line-height: 116upx;
		color: #fff;
		font-size: 40upx;
	}
  .goumai-p-p {
  	width: 179upx;
  	height: 100%;
  	background-color: #999999;
  	margin-left: 97px;
  	text-align: center;
  	line-height: 116upx;
  	color: #fff;
  	font-size: 40upx;
  }
	.tijiao-p {
		line-height: 110upx;
		margin-left: 30upx;

	}

	.dd {
		color: #faab34;
	}
</style>
